<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在线客服</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <style>
    .main {
      width: 100vw;
      height: 100vh;
      background: linear-gradient(180deg, rgba(149, 179, 212, 1) 0%, rgba(74, 131, 194, 1) 100%);
      overflow: hidden;
    }

    .box {
      width: 58%;
      /* width: 680px; */
      height: 500px;
      background-color: #FAFAFA;
      border-radius: 10px;
      margin: 10vh auto;
      position: relative;
    }

    .title {
      width: 100%;
      height: 10vh;
      background-color: #FFFFFF;
      border-radius: 10px 10px 0 0;
    }

    .logo {
      width: 50px;
      height: 40px;
      margin: 11px 0 0 25px;
    }

    .title .title-hn {
      font-size: 25px;
      color: #3F5267;
      vertical-align: 10px;
    }

    .setproblem {
      width: 80%;
      height: 68px;
      background-color: #FFFFFF;
      border: 1px solid rgba(221, 221, 221, 1);
      border-radius: 2px;
      position: absolute;
      bottom: 10%;
      left: 10%;
    }

    .setproblem textarea {
      color: #999999;
      padding: 10px;
      box-sizing: border-box;
    }

    .setproblem button {
      width: 53px;
      height: 23px;
      line-height: 23px;
      background: rgba(28, 136, 255, 1);
      opacity: 1;
      border-radius: 2px;
      font-size: 10px;
      color: #FFFFFF;
      position: absolute;
      right: 5%;
      top: 30%;
      cursor: pointer;
    }

    .content {
      height: 300px;
      overflow-y: scroll;
      font-size: 14px;
    }

    .content .circle {
      display: inline-block;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background-color: #EFF1F3;
    }

    .content .circle_r {
      position: absolute;
      left: 0%;
    }

    .content .circle_l {
      vertical-align: -10px;
    }

    .content .info_r .pic_r {
      width: 17px;
      height: 17px;
      margin: 8px;
    }

    .content .info_l .pic_l {
      width: 13px;
      height: 17px;
      margin: 8px 10px;
    }

    .content .info_r {
      margin-left: 20px;
      margin-top: 15px;
      position: relative;
    }

    .content .info_l {
      text-align: right;
      margin-right: 20px;
      color: #FFFFFF;
      margin-top: 10px;
    }

    .content .con_r {
      display: inline-block;
      /* max-width: 253px; */
      width: 253px;
      min-height: 55px;
      /* min-height: 20px; */
      background-color: #E3EAF2;
      border-radius: 6px;
      padding: 10px;
      margin-left: 40px;
    }

    .content .con_text {
      color: #333;
      margin-bottom: 5px;
    }

    .content .con_que {
      color: #1C88FF;
      height: 30px;
      line-height: 30px;
      cursor: pointer;
    }

    .content .con_l {
      display: inline-block;
      width: 253px;
      /* min-height: 20px; */
      min-height: 51px;
      background-color: #1C88FF;
      border-radius: 6px;
      padding: 10px;
      text-align: left;
      color: #fff;
      margin-right: 5px;
    }

    .content .time_r {
      margin-left: 45px;
      color: #999999;
      font-size: 12px;
    }

    .content .time_l {
      margin-right: 45px;
      color: #999999;
      font-size: 12px;
      margin-top: 5px;
    }

    #question {
      cursor: pointer;
    }

    .czkj-item-title {
      line-height: 25px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 5px;
      margin-bottom: 5px;
    }

    .czkj-item-question {
      cursor: pointer;
      display: block;
      padding: 8px;
      position: relative;
      border-bottom: 1px dashed #ccc;
      line-height: 20px;
      min-height: 20px;
      overflow: hidden;
    }

    .czkj-question-msg {
      float: left;
      font-size: 14px;
      color: #4aa4eb;
    }
  </style>

</head>

<body>
  <div class="header" id="top" style="display:none">
  </div>
  <div class="main">
    <div class="box">
      <div class="title">
        <img src="img/robot.png" alt="" class="logo">
        <span class="title-hn"></span>
      </div>
      <!-- 聊天内容区域 -->
      <div class="content" id="content">
        <div class="info_r info_default">
          <span class="circle circle_r"><img src="img/man.png" class='pic_r'></span>
          <div class='con_r con_text'>
            <div>
              您好，欢迎使用社区在线只能服务
            </div>
            <div class="con_que" data-index="1" data-questionid="1">1.物业缴费流程</div>
            <div class="con_que" data-index="1" data-questionid="2">2.物业报修流程</div>
            <div class="con_que" data-index="2" data-questionid="3">3.社区服务投诉</div>
            <div class="con_que" data-index="3" data-questionid="4">4.社区服务建议</div>
          </div>
        </div>


      </div>
      <!-- 发送问题区域 -->
      <div class="setproblem">
        <textarea placeholder="请输入您的问题..." style="height: 68px;width: 100%;resize:none;padding-right:80px"
          id="text"></textarea>
        <button onclick="sentMsg()" class="setproblems">
          <span style="vertical-align: 4px;">发送</span>
        </button>
      </div>
    </div>
  </div>
</body>
<script src="Plugins/jquery-2.1.0.js"></script>
<script src="Plugins/layui/layui.js"></script>
<script src="Plugins/echarts.min.js"></script>
<script src="Plugins/vue.js"></script>
<script>

  // 发送消息
  function sentMsg() {
    let time = getTodayTime();
    let text = $('#text').val();
    console.log(text)
    var commentLi = '';
    commentLi = '<div class="info_l">';
    commentLi += '<span class="con_l">' + text + '</span>';
    commentLi += '<span class="circle circle_l"><img src="img/robot.png" class="pic_l"></span>';
    commentLi += '<div class="time_l">' + time + '</div>';
    commentLi += '</div>';
    $('.content').append(commentLi);

    $.ajax({
      url: '/api/send-message',
      type: 'POST',
      contentType: "application/json; charset=utf-8",
      success: function (res) {
        console.log(res)
      },
      error: function (data) {
      }
    });

    // 发送过消息后将页面滚动到底部
    var contentHeight = document.getElementById('content');
    contentHeight.scrollTop = contentHeight.scrollHeight;
    appendRobotMsg(text)
  }
  // 选中问题后再次发送消息
  function selMsg(text) {
    let time = getTodayTime();
    var commentLi = '';
    commentLi = '<div class="info_l">';
    commentLi += '<span class="con_l">' + text + '</span>';
    commentLi += '<span class="circle circle_l"><img src="img/robot.png" class="pic_l"></span>';
    commentLi += '<div class="time_l">' + time + '</div>';
    commentLi += '</div>';
    $('.content').append(commentLi);
    appendRobotMsg(text)
    // 发送过消息后将页面滚动到底部
    var contentHeight = document.getElementById('content');
    contentHeight.scrollTop = contentHeight.scrollHeight;
  }
  // 键盘回车事件
  $(document).keypress(function (e) {
    if (e.keyCode == '13') {
      sentMsg();
    }
  });
  // 获取当前时间
  function getTodayTime() {
    // 获取当前时间
    var day = new Date();
    let seconds = day.getSeconds();
    if (seconds < 10) {
      seconds = "0" + seconds;
    } else {
      seconds = seconds;
    }
    let minutes = day.getMinutes();
    if (minutes < 10) {
      minutes = "0" + minutes;
    } else {
      minutes = minutes;
    }
    let time = day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate() + " " + day.getHours() + ":" + minutes + ":" + seconds;
    return time
  }
  // 机器人回复
  function appendRobotMsg(text) {
    text = text.trim();
    let time = getTodayTime();
    // 输入内容为空时提示
    var serviceList = [{ msg: '问题1：如何网上缴费', questionId: '1', }, { msg: '问题2：如何申请报修', questionId: '2', }];
    let title = '智能客服'
    let commentLi;
    if (text == '1') {
      commentLi = '<div class="info_r">';
      commentLi += '<span class="circle circle_r"><img src="img/robot.png" class="pic_r"></span>';
      commentLi += '<span class="con_r con_text ">' + '请点击主页在线缴费，输入您的住户信息，成功后即可点击缴费' + '</span>';
      commentLi += '<div class="time_r">' + time + '</div>';
      commentLi += '</div>';
    }else if (text == '2') {
      commentLi = '<div class="info_r">';
      commentLi += '<span class="circle circle_r"><img src="img/robot.png" class="pic_r"></span>';
      commentLi += '<span class="con_r con_text ">' + '请点击主页在线报修，输入您的住户信息，成功后即可点击报修' + '</span>';
      commentLi += '<div class="time_r">' + time + '</div>';
      commentLi += '</div>';

    } else if (text == '3') {
      commentLi = '<div class="info_r">';
      commentLi += '<span class="circle circle_r"><img src="img/robot.png" class="pic_r"></span>';
      commentLi += '<span class="con_r con_text ">' + '请输入您的投诉内容并提交' + '</span>';
      commentLi += '<div class="time_r">' + time + '</div>';
      commentLi += '</div>';

    } else if (text == '4') {
      commentLi = '<div class="info_r">';
      commentLi += '<span class="circle circle_r"><img src="img/robot.png" class="pic_r"></span>';
      commentLi += '<span class="con_r con_text ">' + '请输入您的建议内容并提交' + '</span>';
      commentLi += '<div class="time_r">' + time + '</div>';
      commentLi += '</div>';

    } else if (text == '') {
      commentLi = '<div class="info_r">';
      commentLi += '<span class="circle circle_r"><img src="img/robot.png" class="pic_r"></span>';
      commentLi += '<span class="con_r con_text ">' + '请输入问题' + '</span>';
      commentLi += '<div class="time_r">' + time + '</div>';
      commentLi += '</div>';

    } else {
      commentLi = '<div class="info_r">';
      commentLi += '<span class="circle circle_r"><img src="img/robot.png" class="pic_r"></span>';
      commentLi += '<span class="con_r con_text ">' + '这道题我不会换一个' + '</span>';
      commentLi += '<div class="time_r">' + time + '</div>';
      commentLi += '</div>';
    }
    $('.content').append(commentLi);
    $('#text').val('');

    // 发送过消息后将页面滚动到底部
    var contentHeight = document.getElementById('content');
    contentHeight.scrollTop = contentHeight.scrollHeight;
  }
</script>

</html>